<template>
  <div class="main-box">
    <el-button
      type="primary"
      icon="el-icon-plus"
      style="margin-bottom: 16px"
      @click="add"
    >
      {{ $t('添加城市') }}
    </el-button>
    <BaseTable :request="request" ref="baseTable">
      <el-table-column label="ID" prop="id" />
      <el-table-column :label="$t('城市')" prop="title" />
      <el-table-column :label="$t('添加时间')" prop="create_time" />
      <el-table-column :label="$t('操作')" fixed="right" align="right">
        <template slot-scope="scope">
          <EditBtn @click="edit(scope.row)" />
          <DelBtn @success="del(scope.row)" />
        </template>
      </el-table-column>
    </BaseTable>
    <BaseDialog
      :title="addForm.id ? $t('编辑城市') : $t('添加城市')"
      :dialog-show.sync="dialogShow"
      width="50%"
      footer
      @submit="submit"
    >
      <el-form
        ref="addForm"
        :model="addForm"
        :rules="rules"
        class="addForm"
        label-position="top"
      >
        <el-form-item :label="$t('城市')" prop="title">
          <el-input
            v-model="addForm.title"
            :placeholder="$t('请输入城市名称')"
          />
        </el-form-item>
      </el-form>
    </BaseDialog>
  </div>
</template>

<script>
import cityApi from '@/api/job.js'
export default {
  data() {
    return {
      request: cityApi.jobCityList,
      cityList: [],
      addForm: {
        title: ''
      },
      rules: {
        title: [
          {
            required: 'true',
            message: this.$t('请输入城市名称'),
            trigger: 'blur'
          }
        ]
      },
      dialogShow: false
    }
  },
  created() {},
  methods: {
    // 添加
    add() {
      this.addForm.id = ''
      this.addForm.title = ''
      this.dialogShow = true
    },
    // 编辑
    edit(val) {
      const row = this.$lodash.cloneDeep(val)
      this.addForm.id = row.id
      this.addForm.title = row.title
      this.dialogShow = true
    },
    // 提交
    submit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (!this.addForm.id) {
            cityApi.jobCitySave({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.$refs.baseTable.getList('search')
              }
            })
          } else {
            cityApi.jobCityUpdate({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.$refs.baseTable.getList('search')
              }
            })
          }
        } else {
          this.$message.error(this.$t('请填写必要信息'))
        }
      })
    },
    // 删除
    del(row) {
      cityApi.jobCityDelete({ id: row.id }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.$refs.baseTable.getList('search')
        }
      })
    }
  }
}
</script>
<style lang="scss">
#city {
  .addForm {
    .el-form-item {
      width: 100%;
    }
    .el-form-item__content {
      width: calc(100% - 80px);
    }
  }
}
</style>
<style scoped lang="scss"></style>
